<template>
  <div class="app-container">
    <el-card class="publish-card">
      <el-form ref="postForm" :model="postForm" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="postForm.title" placeholder="请输入帖子标题" />
        </el-form-item>
        
        <el-form-item label="分类" prop="categoryId">
          <el-select v-model="postForm.categoryId" placeholder="请选择帖子分类">
            <el-option
              v-for="item in categoryOptions"
              :key="item.categoryId"
              :label="item.categoryName"
              :value="item.categoryId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="内容" prop="content">
          <editor
            v-model="postForm.content"
            :min-height="192"
            @init="initEditor"
          />
        </el-form-item>

        <el-form-item label="标签">
          <el-tag
            v-for="tag in postForm.tags"
            :key="tag"
            closable
            :disable-transitions="false"
            @close="handleRemoveTag(tag)"
            class="tag-item"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-if="inputTagVisible"
            ref="tagInputRef"
            v-model="inputTagValue"
            class="tag-input"
            size="small"
            @keyup.enter="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button v-else class="button-new-tag" size="small" @click="showTagInput">
            + 添加标签
          </el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">发布帖子</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup name="PublishPost">
import { getCurrentInstance, ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import Editor from '@/components/Editor';

const { proxy } = getCurrentInstance();
const router = useRouter();
const tagInputRef = ref();

const categoryOptions = ref([]);
const inputTagVisible = ref(false);
const inputTagValue = ref('');

const postForm = reactive({
  title: '',
  categoryId: undefined,
  content: '',
  tags: []
});

const rules = {
  title: [
    { required: true, message: '请输入帖子标题', trigger: 'blur' },
    { min: 2, max: 100, message: '标题长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  categoryId: [
    { required: true, message: '请选择帖子分类', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入帖子内容', trigger: 'blur' }
  ]
};

/** 初始化编辑器 */
function initEditor() {
  // TODO: 编辑器初始化后的操作
}

/** 获取分类列表 */
function getCategories() {
  // TODO: 调用后端API获取分类列表
}

/** 显示标签输入框 */
function showTagInput() {
  inputTagVisible.value = true;
  nextTick(() => {
    tagInputRef.value.focus();
  });
}

/** 处理标签输入确认 */
function handleInputConfirm() {
  if (inputTagValue.value) {
    if (postForm.tags.length >= 5) {
      proxy.$modal.msgError('最多添加5个标签');
      return;
    }
    if (!postForm.tags.includes(inputTagValue.value)) {
      postForm.tags.push(inputTagValue.value);
    }
  }
  inputTagVisible.value = false;
  inputTagValue.value = '';
}

/** 移除标签 */
function handleRemoveTag(tag) {
  postForm.tags.splice(postForm.tags.indexOf(tag), 1);
}

/** 提交表单 */
function submitForm() {
  proxy.$refs['postForm'].validate((valid) => {
    if (valid) {
      // TODO: 调用后端API发布帖子
      proxy.$modal.msgSuccess('发布成功');
      router.push('/forum/list');
    }
  });
}

/** 取消发布 */
function cancel() {
  router.push('/forum/list');
}

onMounted(() => {
  getCategories();
});
</script>

<style scoped>
.publish-card {
  margin-bottom: 20px;
}
.tag-item {
  margin-right: 10px;
  margin-bottom: 10px;
}
.tag-input {
  width: 90px;
  margin-right: 10px;
  vertical-align: bottom;
}
.button-new-tag {
  margin-bottom: 10px;
}
</style> 